<template>
  <div class="searchProject">
    <div class="searchTop">
      <div class="searchBox">
        <search
          @result-click="resultClick"
          @on-change="getResult"
          placeholder="查询公益项目"
          v-model="value"
          position="absolute"
          auto-scroll-to-top top="0px"
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
          ref="search"></search>
      </div>
    </div>

    <div class="searchHotWord" v-show="eventListQB == ''">
      <p class="hotWordP">搜索热词</p>
      <ul>
        <li v-for="hotLists in hotList" v-show="hotLists.label1 != ''" @click="value = hotLists.label1">{{hotLists.label1}}</li>
        <li v-for="hotLists in hotList" v-show="hotLists.label2 != ''" @click="value = hotLists.label2">{{hotLists.label2}}</li>
      </ul>
    </div>
    <div class="searchType" v-show="eventListQB == ''">
      <p class="typeP">项目类型</p>
      <ul>
        <li @click="goSearchPage('all')">全部<span>({{allNum}})</span></li>
        <li @click="goSearchPage('pool')">助困<span>({{poolNum}})</span></li>
        <li @click="goSearchPage('study')">助学<span>({{studyNum}})</span></li>
        <li @click="goSearchPage('medicine')">助医<span>({{medicineNum}})</span></li>
        <!--<li @click="goSearchPage('all')">一对一捐助<span>({{oneToOneNum}})</span></li>-->
        <li @click="goSearchPage('other')">其它<span>({{otherNum}})</span></li>
      </ul>
    </div>
    <scroller lock-x height="580px" style="margin-top: 42px" :use-pullup='use_pullup' :pullup-config="pullup_con"
              @on-pullup-loading="onScrollBottom" ref="scroller" :scroll-bottom-offst="200" v-show="eventListQB != ''">
      <div class="home-tab">
        <p class="howMany" v-show="allnumber != ''">查到{{allnumber}}个相关项目</p>
        <tab :line-width=2 v-model="index" v-show="eventListjinqi != ''">
          <tab-item class="vux-center" :selected="demo === '近期项目'" @on-item-click="firstTab()">
            <span :class="{'home-active': isA}">近期项目</span>
          </tab-item>
          <tab-item class="vux-center" @on-item-click="secondTab()">
            <span :class="{'home-active': isB}">往期项目</span>
          </tab-item>
        </tab>
        <div @click="goProject(eventListJqs.id)" v-for="(eventListJqs, index) in eventListQB">
          <!--<p class="listTitle" v-html="eventListJqs.eventName"></p>-->
          <flexbox>
            <flexbox-item :span="4">
              <div class="flex-demo">
                <img :src="imageUrl.imageUrl + eventListJqs.eventPicUrl"/>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="flex-demo">
                <p><span v-html="eventListJqs.eventName"></span></p>
                <p><em class="lable" v-show="eventListJqs.label1 != ''">{{eventListJqs.label1}}</em>
                  <em class="lable" v-show="eventListJqs.label2 != ''">{{eventListJqs.label2}}</em>
                  <em class="lable" v-show="eventListJqs.label1 == ''">爱心</em>
                  <em class="lable" v-show="eventListJqs.label2 == ''">捐助</em></p>
                <x-progress :percent="eventListJqs.schedule" :show-cancel="false"></x-progress>
                <span class="precess-right">{{eventListJqs.schedule}}%</span>
                <div class="project-foot">
                <span class="project-foot-left">目标<span
                  class="content-red">{{eventListJqs.eventGoalAmount}}</span>元</span>
                  <span class="project-foot-left">参加<span
                    class="content-red">{{eventListJqs.attendPeople}}</span>人次</span>
                </div>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
        <!--<div class="moreEvent" @click="whichGoMore()" v-model="noMoreEvent">{{noMoreEvent}}</div>-->
      </div>
    </scroller>

  </div>
</template>

<script src="./searchProject.js"></script>
